import React from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Table, Pagination, Popconfirm, Button, Card, Radio, Input } from 'antd';
import { routerRedux } from 'dva/router';
import { Modal } from '../../components';
import moment from 'moment';
import './UserHistory.less'
;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;


class UserHistory extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {};
  }
  table_onChange = (pagination, filters, sorter) => {
    console.log('params', pagination, filters, sorter);
  }

  radio_onChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  }


  render() {
    const { user_History, user, history_msg } = this.props;
    console.log(user_History);
    const columns = [
      { title: '访问设备', dataIndex: 'device' },
      { title: '设备类型', dataIndex: 'device_vendor' },
      { title: '城市', dataIndex: 'city' },
      { title: '访问时间', dataIndex: 'access_time', render: text => (moment(text).format('YYYY-MM-DD hh:mm:ss')), sorter: (a, b) => new Date(a.access_time).getTime() - new Date(b.access_time).getTime() },
      { title: '访问IP', dataIndex: 'ip' },
      {
        title: '详情',
        key: 'operation',
        render: (text, record) => (
          <Modal record={record} />
        ),
      },
    ];

    return (
      <Card bodyStyle={{ margin: 0 }}>
        <card> <img src={user.headimgurl} style={{ width: 50 }} /><h2>{decodeURI(user.nickname)}</h2>
          <h4 style={{ marginBottom: 10 }}>
            <span>ID：{user.id}</span>
            <span style={{ marginLeft: 20 }}>城市：{user.city}</span>
            <span style={{ marginLeft: 20 }}>访问次数：{user.visit_count}</span>
            <span style={{ marginLeft: 20 }}>访问次数：{user.visit_count}</span>
            <span style={{ marginLeft: 20 }}>注册时间：{moment(user.reg_time).format('YYYY-MM-DD hh:mm:ss')}</span>
            <span style={{ marginLeft: 20 }}>最后时间：{moment(user.last_time).format('YYYY-MM-DD hh:mm:ss')}</span>
          </h4 ></card>
        <Table rowKey={record => record.access_time} columns={columns} dataSource={user_History} bordered loading={this.props.loading} />
      </Card>
    );
  }

}


function mapStateToProps(state) {
  const loading = state.loading.models.userHistory;
  return { ...state.userHistory, loading };
}
UserHistory.propTypes = {
};
export default connect(mapStateToProps)(UserHistory);
